<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: wiz
 * @Date: 2024-05-30 19:04:18
 * @LastEditors: wiz
 * @LastEditTime: 2024-07-11 18:31:52
-->
<template>
  <div class="o-icon-selector">
    <i-input
      v-model="value"
      search
      @on-search="open"
      @on-blur="onBlur"
      @on-change="onChange"
      :disabled="isDisabled"
    >
      <Icon :custom="getIcon" slot="prefix" />
    </i-input>
  </div>
</template>
<script lang="ts">
import { Tsrv } from '@/services';
import { Component, Model, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class oIconSelector extends Vue {
  @Prop() renderOpts: any;

  @Prop() params: any;

  @Prop({ required: false, default: false }) disabled: boolean;

  public compName: string = 'oIconSelector';

  private value: string | null = null;

  private isDisabled: boolean = false;

  get getIcon() {
    return `wy-icon wy-${this.value}`;
  }

  @Model('model-change') modelvalue: string | null;

  @Watch('modelvalue')
  public onValueChange(val: string | number | null) {
    this.setValue(val);
  }

  @Watch('params')
  public onParamsChange() {
    this.init();
    this.setValue();
  }

  mounted() {
    this.init();
    this.setValue();
  }

  public init() {
    this.isDisabled = this.disabled;
  }

  private onBlur() {
    this.$emit('model-change', this.value);
  }

  private onChange() {
    this.$emit('model-change', this.value);
  }

  private open() {
    const params: any = {
      source: {
        funid: null,
        field: '_sys_iconlib',
        limit: 99,
        filter: {
          globalSearch: '',
          initSearch: ''
        }
      },
      receiver: '',
      config: {
        isFunLayout: false
      }
    };
    Tsrv.utils.createModal('oMagicBox', params).then(data => {
      data && (this.value = data[0].icon_class);
      this.$emit('model-change', this.value);
    });
  }

  public resetValue() {
    this.setValue(null);
  }

  public setValue(val: null | string | number | undefined = undefined) {
    this.value = this.modelvalue;
  }
}
</script>
